.handleRoot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transition: background 200ms;

  &:hover {
    background: #00000009;
  }
}

.bottom,
.top {
  width: 100%;
  left: 0;
  cursor: ns-resize;
}

.left,
.right {
  height: 100%;
  top: 0;
  cursor: ew-resize;
}

.bottom {
  bottom: 0;
  border-radius: 0 0 9999px 9999px;
  transform: translateY(100%);
}

.top {
  top: 0;
  border-radius: 9999px 9999px 0 0;
  transform: translateY(-100%);
}

.right {
  right: 0;
  border-radius: 0 9999px 9999px 0;
  transform: translateX(100%);
}

.left {
  left: 0;
  border-radius: 9999px 0 0 9999px;
  transform: translateX(-100%);
}

.handle {
  max-width: 100%;
  max-height: 100%;
  border-radius: 9999px;
  background: #00000022;
}
